import React, { useState, useEffect, useMemo, Fragment } from 'react';
import { connect } from 'umi';
import { Form, Card, Modal, Table, Tag } from 'antd';
import { formatMessage } from 'umi';
import { get as _get } from 'object-path';
import moment from 'moment';
import xss from 'xss';
import cn from 'classnames';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { getDuration, hideSalaryTable } from '@/utils/utils';
import FlowStep from '@/components/Step';
import styles from '@/pages/Flow/Mine/MyApplication/Detail.less';
import { FormContainer } from '@/components/UserForm';
import Resume from '@/pages/MyRecruit/Candidate/DetailResume/Resume';
import ViewRecord from '@/pages//MyRecruit/Candidate/DetailResume/ViewRecord';
import { withRoutePage } from '@/utils/enhanceUtils';
import PageRouter from '@/components/PageRouter/PageRouter';
import SalaryRefTable from '@/components/SalaryRefTable';
import TableDiff from '@/components/Custom/TableDiff';
import PostTableDiff from '@/components/Custom/PostTableDiff';
import routers from '@/../config/sub.router.config';
import { getBase, getContent } from './gradeFormItem';
import { SalaryHelper } from '../../components';
import { DetailAction } from './Action';

// const { Step } = Steps;

// const subtitle = {
//     marginLeft: '18px',
//     fontSize: '14px',
//     color: '#40A9FF'
// };
// const dictStatus = {
//     1: 'wait',
//     2: 'process',
//     3: 'error',
//     4: 'finish',
//     5: 'error',
//     6: 'error'
// };
const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 }
};
const subTitle = {
    display: 'inline-block',
    verticalAlign: 'middle',
    marginLeft: '12px',
    marginBottom: 0,
    fontSize: '12px',
    color: 'rgba(24, 144, 255, 1)'
};

const noValue = value => {
    let isNoValue = false;

    if (value === '') {
        isNoValue = true;
    }
    if (Array.isArray(value)) {
        const result = value.filter(item => item !== '[]' && item);
        if (result.length === 0) {
            isNoValue = true;
        }
    }

    return isNoValue;
};

// const Title = (
//     <div>
//         请假申请
//         <span style={subtitle}>（待我审批）</span>
//     </div>
// );

const CardList = ({ dispatch, location, approvalDetail, applyCommon, loading, match }) => {
    // 获取登陆人公司postid
    const user = localStorage.getItem('user');
    const { postId = '', companyId } = user ? JSON.parse(user) : {};
    const { userCode = '' } = user ? JSON.parse(user) : {}; // 用来判断当前操作人与审批人是否为同一人
    const { applyDetail = {}, applayProcessList, attenddetail = {} } = approvalDetail;
    const { candiDetail = {}, interviewList = [] } = applyCommon;
    const [signDate, setSignDate] = useState(''); // 打卡时间
    const [statusString, setStatusString] = useState(''); // 某人 某审批状态
    const [waitAction, setWaitAction] = useState(true); // 是否需要展示待我审批操作权限
    const [modalvisible, setModalvisible] = useState(false); // 模态框展示
    const [redetail, setRedetail] = useState(false); // 模态框展示
    const { formValueJson = [], offerFile = [], workflowFile = [], officeFile = [], officeResFile = [] } = applyDetail;
    // 日期格式(单位：leaveUnit)，请假申请
    const { formatTime } = formValueJson;
    // 薪资参考用以显示特殊的card title
    const [salaryStandardName, setSalaryStandardName] = useState('');

    const extra = useMemo(
        () => [
            {
                applicationNo: applyDetail.applicationNo,
                processInstanceId: applyDetail.processInstanceId,
                applicationName: salaryStandardName + applyDetail.applicationName,
                applyId: applyDetail.id
            }
        ],
        [applyDetail, salaryStandardName]
    );

    const columnsModal = [
        {
            title: '工号',
            dataIndex: 'userNo',
            key: 'userNo'
        },
        {
            title: '姓名',
            dataIndex: 'employeeName',
            key: 'employeeName'
        },
        {
            title: '部门',
            dataIndex: 'departmentName',
            key: 'departmentName'
        },
        {
            title: '打卡时间',
            dataIndex: 'attDatetime',
            key: 'attDatetime'
        },
        {
            title: '考勤来源',
            dataIndex: 'deviceName',
            key: 'deviceName'
        }
    ];
    const clockDetail = () => {
        // const user = JSON.parse(localStorage.getItem('user'));
        const searchTime = _get(applyDetail, 'formValueJson.补卡时间', '');
        const parame = {
            employeeCode: _get(applyDetail, 'employeeCode', ''),
            startTime: moment(searchTime).format('YYYY-MM-DD'),
            endTime: moment(searchTime).format('YYYY-MM-DD'),
            current: 1,
            pageSize: 50
        };
        dispatch({
            type: 'approvalDetail/getAttendancedetail',
            payload: {
                ...parame
            }
        }).then(() => {
            setSignDate(moment(searchTime).format('YYYY-MM-DD'));
            setModalvisible(true);
        });
    };
    const handleSubmit = async (values, actionName, extradata) => {
        const { sysApproveByPresident, ...otherValue } = values;
        const { sysApproveByPresidentAssistant, ...otherValues } = values;
        switch (actionName) {
            case '审批同意':
                if (values.sysApproveByPresident !== undefined) {
                    await dispatch({
                        type: 'approvalDetail/fetchDetailAgree',
                        payload: {
                            ...otherValue,
                            ...extradata,
                            variableMap: {
                                sys_approveByPresident: values.sysApproveByPresident
                            }
                        }
                    });
                } else if (values.sysApproveByPresidentAssistant !== undefined) {
                    await dispatch({
                        type: 'approvalDetail/fetchDetailAgree',
                        payload: {
                            ...otherValues,
                            ...extradata,
                            variableMap: {
                                sys_approveByPresidentAssistant: values.sysApproveByPresidentAssistant
                            }
                        }
                    });
                } else {
                    await dispatch({
                        type: 'approvalDetail/fetchDetailAgree',
                        payload: {
                            ...values,
                            ...extradata
                        }
                    });
                }

                break;
            case '审批拒绝':
                await dispatch({
                    type: 'approvalDetail/fetchDetailRefuse',
                    payload: {
                        ...values,
                        ...extradata
                    }
                });
                break;
            case '审批退回':
                await dispatch({
                    type: 'approvalDetail/fetchDetailReturn',
                    payload: {
                        ...values,
                        ...extradata
                    }
                });
                break;
            default:
                break;
        }
        // 这个地方写你的请求 请求成功返回 true
        return true;
        // setVisible(false);
    };
    const renderImages = (files, width, height) =>
        files.length > 0 &&
        files.map(item => (
            <div key={item.id}>
                <img src={item.url} alt={item.originName} width={width} height={height} />
                <p>{item.originName}</p>
            </div>
        ));

    const setFormItem = (formValue, all, isCustomStyle) => {
        // 是否自定义formItem样式
        let customLayOut = {};
        if (isCustomStyle) {
            customLayOut = {
                labelCol: { span: 6 },
                wrapperCol: { span: 18 }
            };
        }

        let candicateIndex = 0;

        Object.keys(formValue).forEach(prop => {
            // 非必填且没有值的就不显示
            if (noValue(formValue[prop])) return null;
            if (prop === '时长' || prop === 'duration') {
                if (formatTime) {
                    all.push(
                        <Form.Item key={prop} label={prop} {...customLayOut}>
                            {getDuration(Number(formValue[prop]), Number(formatTime) || 3)}
                        </Form.Item>
                    );
                } else {
                    all.push(
                        <Form.Item key={prop} label={prop} {...customLayOut}>
                            {getDuration(Number(formValue[prop]), 3)}
                        </Form.Item>
                    );
                }
            } else if (prop === '录用人姓名') {
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        {formValue[prop]}
                        <a
                            style={{ marginLeft: 8 }}
                            href="#"
                            onClick={() => {
                                setRedetail(true);
                            }}
                        >
                            录用人详情
                        </a>
                    </Form.Item>
                );
            } else if (prop === '与候选人关系') {
                if (candicateIndex === 0) {
                    all.push(
                        <Form.Item key={prop} label={prop} {...customLayOut}>
                            {formValue[prop] && formValue[prop][0]}
                        </Form.Item>
                    );
                    candicateIndex += 1;
                } else if (candicateIndex === 1) {
                    all.push(
                        <Form.Item key={prop} label={prop} {...customLayOut}>
                            {formValue[prop] && formValue[prop][1]}
                        </Form.Item>
                    );
                }
            } else if (prop === '附件' || prop === 'talentName' || prop === '新闻列表图片' || prop === '推荐新闻图片') {
                // console.info(1);
                // return null;
            } else if (prop === 'formatTime') {
                // 这个字段不做渲染，只得到单位
                // return null;
            } else if (prop === '涨幅') {
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        {formValue[prop]}%
                    </Form.Item>
                );
            } else if (prop === '年薪涨幅') {
                // 招聘管理界面优化-offer 审批表单中年薪涨幅展示 “%”
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        {formValue[prop]}%
                    </Form.Item>
                );
            } else if (formValue[prop] === 'true') {
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        是
                    </Form.Item>
                );
            } else if (formValue[prop] === 'false') {
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        否
                    </Form.Item>
                );
            } else if (prop === 'null') {
                // return null;
            } else if (prop === '补卡时间') {
                all.push(
                    <Form.Item key={prop} label={prop} style={{ marginBottom: 0 }} {...customLayOut}>
                        {formValue[prop]}
                        <a style={{ marginLeft: '10px' }} onClick={() => clockDetail()}>
                            查看打卡记录
                        </a>
                    </Form.Item>
                );
            } else if (prop === '需求部门' || prop === '录用部门' || prop === '籍贯') {
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        {JSON.parse(formValue[prop]).join('/')}
                    </Form.Item>
                );
            } else if (prop === '期望到岗时间') {
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        {formValue[prop].join(' 到 ')}
                    </Form.Item>
                );
            } else if (prop === '薪资范围') {
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        {formValue[prop][0] && `${formValue[prop][0]}K/月`}
                        {formValue[prop][1] && ` - ${formValue[prop][1]}K/月`}
                        {formValue[prop][2] && ` x ${formValue[prop][2]}月`}
                    </Form.Item>
                );
            } else if (prop === '语言能力') {
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        {formValue[prop][0] && `${JSON.parse(formValue[prop][0]).join(' , ')}`}
                        {formValue[prop][1] && `(${formValue[prop][1]})`}
                    </Form.Item>
                );
            } else if (Array.isArray(formValue[prop])) {
                if (prop === '实施范围') {
                    all.push(
                        <Form.Item key={prop} label={prop} {...customLayOut}>
                            {formValue[prop][0]}
                        </Form.Item>
                    );
                } else if (prop === '发布类型') {
                    if (formValue[prop][1] === '') {
                        all.push(
                            <Form.Item key={prop} label={prop} {...customLayOut}>
                                {formValue[prop][0]}
                            </Form.Item>
                        );
                    } else {
                        all.push(
                            <Form.Item key={prop} label={prop} {...customLayOut}>
                                {formValue[prop][0]}-{formValue[prop][1]}
                            </Form.Item>
                        );
                    }
                } else if (prop === '生效日期') {
                    if (formValue[prop][1] === '') {
                        all.push(
                            <Form.Item key={prop} label={prop} {...customLayOut}>
                                {formValue[prop]
                                    .map(item => (Array.isArray(item) ? item.join('-') : item))
                                    .filter(item => !!item)
                                    .join('-')}
                            </Form.Item>
                        );
                    } else {
                        all.push(
                            <Form.Item key={prop} label={prop} {...customLayOut}>
                                {moment(formValue[prop][1]).format('YYYY-MM-DD')} 至{' '}
                                {moment(formValue[prop][2]).format('YYYY-MM-DD')}
                            </Form.Item>
                        );
                    }
                } else {
                    all.push(
                        <Form.Item key={prop} label={prop} {...customLayOut}>
                            {formValue[prop]
                                .map(item => (Array.isArray(item) ? item.join('-') : item))
                                .filter(item => !!item)
                                .join('-')}
                        </Form.Item>
                    );
                }
            } else if (
                prop === '职位工作内容' ||
                prop === '其他要求' ||
                prop === '试用期标准' ||
                prop === '人力资源总监意见' ||
                prop === '增补原因' ||
                prop === '总经理意见' ||
                prop === '直属上级评价' ||
                prop === '同级评价' ||
                prop === '下属评价' ||
                prop === '背调对象1' ||
                prop === '背调对象2'
            ) {
                all.push(
                    <Form.Item
                        key={prop}
                        label={prop}
                        {...customLayOut}
                        vvspan={24}
                        labelCol={{ span: 3 }}
                        wrapperCol={{ span: 21 }}
                    >
                        <pre className={styles.pre}>{formValue[prop]}</pre>
                    </Form.Item>
                );
            } else if (prop === '新闻内容(中文)' || prop === '新闻内容(英文)') {
                all.push(
                    <Form.Item
                        key={prop}
                        label={prop}
                        {...customLayOut}
                        vvspan={24}
                        labelCol={{ span: 3 }}
                        wrapperCol={{ span: 21 }}
                    >
                        <span
                            style={{ wordBreak: 'break-all' }}
                            // eslint-disable-next-line react/no-danger
                            dangerouslySetInnerHTML={{
                                __html: xss(formValue[prop])
                            }}
                        />
                    </Form.Item>
                );
            } else if (prop === '新闻标签(中文)' || prop === '新闻标签(英文)') {
                all.push(
                    <Form.Item
                        key={prop}
                        label={prop}
                        {...customLayOut}
                        vvspan={24}
                        labelCol={{ span: 3 }}
                        wrapperCol={{ span: 21 }}
                    >
                        {formValue[prop] &&
                            JSON.parse(formValue[prop]).map(item => <Tag key={item.key}>{item.value}</Tag>)}
                    </Form.Item>
                );
            } else if (prop === '创建时间') {
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        {formValue[prop]}
                    </Form.Item>
                );
                if (officeFile.length > 0) {
                    all.push(
                        <Form.Item label="推荐新闻图片" vvspan={24} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }}>
                            {renderImages(officeFile, 50, 50)}
                        </Form.Item>
                    );
                }
                if (officeResFile.length > 0) {
                    all.push(
                        <Form.Item label="新闻列表图片" vvspan={24} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }}>
                            {renderImages(officeResFile, 100, 50)}
                        </Form.Item>
                    );
                }
            } else if (prop === '制度关键词') {
                all.push(
                    <Form.Item key={prop} label={prop} vvspan={24} labelCol={{ span: 3 }} wrapperCol={{ span: 18 }}>
                        {JSON.parse(formValue[prop]).map(item => (
                            <Tag key={item.key}>{item.value}</Tag>
                        ))}
                    </Form.Item>
                );
            } else if (prop === '制度简介') {
                all.push(
                    <Form.Item key={prop} label={prop} vvspan={24} labelCol={{ span: 3 }} wrapperCol={{ span: 18 }}>
                        {formValue[prop]}
                    </Form.Item>
                );
            } else if (prop === '制度文件') {
                all.push(null);
            } else if (prop === '申请理由说明') {
                all.push(
                    <Form.Item key={prop} label={prop} vvspan={24} labelCol={{ span: 3 }} wrapperCol={{ span: 18 }}>
                        {formValue[prop]}
                    </Form.Item>
                );
            } else {
                all.push(
                    <Form.Item key={prop} label={prop} {...customLayOut}>
                        {formValue[prop]}
                    </Form.Item>
                );
            }
            return null;
        });
    };

    const getFormItem = () => {
        // 判断是否是数组，如果是数组表示有小标题
        const all = [];
        // ------------------------------------------------------------------------------- 职级相关逻辑开始
        const specialRule = [
            'addGradeType',
            'addGrade',
            'editGrade',
            'editGradeType',
            'modifyGrade',
            'modifyGradeType',
            'deleteGrade',
            'deleteGradeType'
        ].includes(applyDetail.formKey);
        if (specialRule) {
            if (!Array.isArray(formValueJson)) {
                return null;
            }
            const [base, content] = formValueJson;

            return [...getBase(base, applyDetail.formKey), ...getContent(content, applyDetail.formKey)];
        }
        // ------------------------------------------------------------------------------- 职级相关逻辑结束

        // ------------------------------------------------------------------------------- 薪资相关逻辑开始
        if (applyDetail.formKey === 'editSalary' || applyDetail.formKey === 'positionMapping') {
            const Component = applyDetail.formKey === 'editSalary' ? TableDiff : PostTableDiff;
            const salaryProps = applyDetail.formKey === 'editSalary' ? { setSalaryStandardName } : {};
            const content = (
                <Form.Item label="修改内容" labelCol={{ span: 3 }} wrapperCol={{ span: 18 }}>
                    <Component
                        {...salaryProps}
                        setSalaryStandardName={setSalaryStandardName}
                        value={formValueJson[0].value['修改内容']}
                        type={formValueJson[0].value['表单类型']}
                    />
                </Form.Item>
            );
            const reason = (
                <Form.Item label="修改理由" labelCol={{ span: 3 }} wrapperCol={{ span: 18 }}>
                    {formValueJson[0].value['修改理由']}
                </Form.Item>
            );
            return [content, reason];
        }
        // ------------------------------------------------------------------------------- 薪资相关逻辑开始

        if (Array.isArray(formValueJson)) {
            formValueJson.forEach(item => {
                const allItem = [];
                // 如果地下都没有值，则不显示标题
                const result = Object.keys(item.value).filter(prop => !noValue(item.value[prop]));
                if (result.length !== 0) {
                    setFormItem(item.value, allItem, true);
                    all.push(<h4 className={styles.formSubTitle}>{item.title}</h4>);
                    all.push(<FormContainer>{allItem}</FormContainer>);
                    if (item.title === '薪资福利' && !hideSalaryTable) {
                        const { entryPost } = JSON.parse(applyDetail.formValueJsonApp);
                        all.push(
                            <Form.Item
                                label="薪资参考"
                                labelCol={{ md: { span: 3 } }}
                                wrapperCol={{ md: { span: 20 } }}
                            >
                                <SalaryRefTable postId={entryPost} companyId={companyId} />
                            </Form.Item>
                        );
                    }
                }
            });
        } else {
            setFormItem(formValueJson, all, false);
        }

        return all;
    };

    useEffect(() => {
        (async () => {
            if (location && location.query && location.query.applicationNo) {
                // 流程状态字典
                const result = await dispatch({
                    type: 'applyCommon/fetchStatuslist',
                    payload: {
                        code: 'processStatusType'
                    }
                });

                // 申请详情
                dispatch({
                    type: 'approvalDetail/fetchDetail',
                    payload: {
                        applicationNo: location.query.applicationNo,
                        formDeploymentId: location.query.formDeploymentId || ''
                    },
                    success: data => {
                        const oldStatus = `${data.status}`;
                        const newcandidateUsers = data.candidateUsers.split('#');
                        let status = '';
                        let newUsers = '';
                        if (newcandidateUsers.length > 1) {
                            newUsers = `${newcandidateUsers.length}人-`;
                        } else {
                            newUsers = `${data.candidateUsers}-`;
                        }
                        result.forEach(item => {
                            if (item.key === oldStatus) {
                                status = item.value;
                            }
                        });
                        if (data.candidateUsers === '') {
                            setStatusString(`${status}`);
                        } else {
                            setStatusString(`${newUsers}${status}`);
                        }
                        // 判断是否需要待我审批(是否为本人审批 是否状态为审批中)
                        if (data.status === 2) {
                            data.userCodeSet.forEach(item => {
                                if (item === userCode) {
                                    setWaitAction(false);
                                }
                            });
                        }

                        dispatch({
                            type: 'approvalDetail/save',
                            payload: {
                                applayProcessList: data.processValueJson || []
                            }
                        });
                    }
                });
            }
        })();
    }, []);
    useEffect(() => {
        if (formValueJson && formValueJson.length > 0) {
            formValueJson.forEach(item => {
                if (item.title && item.title === '录用信息') {
                    // 获取录用人详情-简历信息
                    dispatch({
                        type: 'applyCommon/candidateDetail',
                        payload: {
                            candidateCode: item.value.talentName
                        }
                    });
                    // 获取录用人详情-面试记录
                    dispatch({
                        type: 'applyCommon/fetchInterviewRecord',
                        payload: {
                            candidateCode: item.value.talentName
                        }
                    });
                }
            });
        }
        // 清空录用人详情数据
        return () => {
            dispatch({
                type: 'applyCommon/save',
                payload: { candiDetail: {}, interviewList: [] }
            });
        };
    }, [JSON.stringify(formValueJson)]);

    // useEffect(
    //     () => () => {
    //         dispatch({
    //             type: 'approvalDetail/save',
    //             payload: {
    //                 applyDetail: {},
    //                 applayProcessList: [],
    //                 attenddetail: {}
    //             }
    //         });
    //     },
    //     []
    // );

    const isArray = Array.isArray(formValueJson);
    const renderFiles = files =>
        files.length > 0 &&
        files.map(item => (
            <div key={item.id}>
                {item.originName}
                <a rel="noopener noreferrer" target="_blank" style={{ marginLeft: 8 }} href={item.url} download>
                    下载
                </a>
            </div>
        ));
    const getFileType = name => name.split('.')[1].toLowerCase();
    const renderIframe = file => {
        if (file.length > 0) {
            // 将s3替换成oss
            const docUrl = encodeURIComponent(file[0].url);
            const url = `https://view.officeapps.live.com/op/view.aspx?src=${docUrl}`;
            return file[0].url ? (
                <FormContainer>
                    <Form.Item label="制度文件" vvspan={24} labelCol={{ span: 3 }} wrapperCol={{ span: 18 }}>
                        <b style={{ color: '#000' }}>{file[0].originName}</b>
                        <div className={cn(styles.textWrap, styles[getFileType(file[0].originName)])}>
                            <div className={styles.maskTop}>
                                <i className={styles.logo} />
                                微微科技内部文件，仅供查看
                            </div>
                            <div className={styles.maskBottom} />
                            <iframe
                                title="制度文件"
                                style={{
                                    width: '100%',
                                    height: '600px',
                                    border: 0
                                }}
                                src={url}
                            ></iframe>
                        </div>
                    </Form.Item>
                </FormContainer>
            ) : (
                ''
            );
        }
        return '';
    };
    const renderCommonItem = () => {
        if (isArray) {
            return (
                <FormContainer>
                    <Form.Item label="申请编号" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                        {applyDetail.applicationNo || ''}
                    </Form.Item>
                    <Form.Item label="所在部门" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                        {applyDetail.department || ''}
                    </Form.Item>
                </FormContainer>
            );
        }
        return (
            <Fragment>
                <Form.Item label="申请编号">{applyDetail.applicationNo || ''}</Form.Item>
                <Form.Item label="所在部门">{applyDetail.department || ''}</Form.Item>
            </Fragment>
        );
    };
    const renderHelper = () => {
        if (applyDetail.formKey === 'editSalary' || applyDetail.formKey === 'positionMapping') {
            return <SalaryHelper formKey={applyDetail.formKey} type={formValueJson[0].value['表单类型']} />;
        }
        return null;
    };
    const find = routers.myflow.find(item => match.path.includes(item.path)) || {};
    return (
        <PageHeaderWrapper>
            <PageRouter type="myflow" activePath={find.path}>
                <Form className={styles.detailForm} {...formItemLayout}>
                    {Object.keys(applyDetail).length === 0 ? null : (
                        <Card
                            title={
                                <span>
                                    {extra[0].applicationName}
                                    <h6 style={subTitle}>
                                        {waitAction || location.query.actionShow === 'no' ? statusString : '待我审批'}
                                    </h6>
                                </span>
                            }
                            bordered={false}
                            extra={[
                                waitAction || location.query.actionShow === 'no' ? null : (
                                    <DetailAction
                                        actionSubmit={handleSubmit}
                                        dataSource={applyDetail}
                                        extradata={extra[0]}
                                        postId={postId}
                                    />
                                )
                            ]}
                        >
                            <div>
                                {renderHelper()}
                                {applyDetail.formKey === 'institutionRelease' ? '' : renderCommonItem()}
                                {getFormItem()}
                                {applyDetail.formKey === 'institutionRelease'
                                    ? renderIframe(applyDetail.institutionFile)
                                    : (offerFile.length > 0 || workflowFile.length > 0) &&
                                      (isArray ? (
                                          <FormContainer>
                                              <Form.Item label="附件" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                                                  {renderFiles((offerFile.length > 0 && offerFile) || workflowFile)}
                                              </Form.Item>
                                          </FormContainer>
                                      ) : (
                                          <Fragment>
                                              <Form.Item label="附件">
                                                  {renderFiles((offerFile.length > 0 && offerFile) || workflowFile)}
                                              </Form.Item>
                                          </Fragment>
                                      ))}
                            </div>
                        </Card>
                    )}
                    {applayProcessList.length === 0 ? null : (
                        <Card title="审批进度" bordered={false}>
                            <Form.Item wrapperCol={{ offset: 3 }}>
                                <FlowStep data={applayProcessList} />
                            </Form.Item>
                        </Card>
                    )}
                </Form>
                <Modal
                    title={
                        <div>
                            <div style={{ fontSize: '20px', color: '#333' }}>
                                {formatMessage({
                                    id: 'stat.ckdkjl'
                                })}
                            </div>
                            <p
                                style={{
                                    color: 'rgba(0, 0, 0, .45)',
                                    fontSize: '14px',
                                    marginBottom: 0
                                }}
                            >
                                {signDate}
                                {formatMessage({
                                    id: 'stat.dksj'
                                })}
                            </p>
                        </div>
                    }
                    width={600}
                    footer={null}
                    visible={modalvisible}
                    onOk={() => {
                        setModalvisible(false);
                        setSignDate('');
                    }}
                    onCancel={() => {
                        setModalvisible(false);
                        setSignDate('');
                    }}
                    centered
                >
                    <Table
                        dataSource={attenddetail}
                        columns={columnsModal}
                        pagination={false}
                        loading={loading}
                        rowKey="id"
                    />
                </Modal>
                <Modal
                    title="录用人详情"
                    width="1050px"
                    visible={redetail}
                    // confirmLoading={datailloading}
                    onOk={() => {
                        setRedetail(false);
                    }}
                    onCancel={() => {
                        // form.resetFields();
                        setRedetail(false);
                    }}
                >
                    <div>
                        <div style={{ width: '800px' }}>
                            <Resume
                                taletData={candiDetail}
                                // taletData={{}}
                                readonly="readonly"
                                disabled="true"
                                sytleSetting="false"
                            />
                        </div>
                        <ViewRecord
                            // tableData={[]}
                            tableData={interviewList}
                            companyId={candiDetail.companyId}
                        />
                    </div>
                </Modal>
            </PageRouter>
        </PageHeaderWrapper>
    );
};
export default withRoutePage(
    connect(({ loading, approvalDetail, applyCommon }) => ({
        approvalDetail,
        applyCommon,
        loading: loading.models.approvalDetail
    }))(Form.create()(CardList))
);
